<template>
  <div>
    <div class="top">
      <p>|</p>
      <span>考勤规则</span>
    </div>
    <el-divider />
    <div class="da">
      <span>考勤规则表</span>
      <el-button type="warning" plain class="add" @click="Addlist"
        >添加</el-button
      >
    </div>
    <div class="bb">
      <div class="top1">
        <p>搜索</p>
        <el-input
          placeholder="请输入考勤组名称"
          v-model="query.name"
          size="large"
          type="text"
          autocomplete="off"
        />
      </div>
      <div class="fen">
        所属项目
        <el-select
          clearable
          v-model="query.items"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="fen">
        考勤组
        <el-select
          clearable
          v-model="query.safety"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in goodlist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-button type="primary" plain class="sou" @click="obtn">搜索</el-button>
    </div>

    <div class="table">
      <el-table
        :data="datalist.slice((page - 1) * limit, page * limit)"
        :header-cell-style="{ backgroundColor: 'rgb(242,242,242)' }"
        border
        style="
          width: 98%;
          height: 250px;
          margin: auto;
          margin-top: 20px;
          font-size: 12px;
          color: black;
          text-align: center;
        "
      >
        <el-table-column prop="id" label="序号" width="50">
          <template #default="scope">
            <span>{{ (page - 1) * limit + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="规则名称" width="100" />
        <el-table-column prop="items" label="所属项目" width="100" />
        <el-table-column prop="types" label="规则类型" width="100" />
        <el-table-column prop="safety" label="考勤组" width="100" />
        <el-table-column prop="application" label="应用考勤组" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="change(scope.row.id)">编辑</el-button>
            <el-popconfirm
              title="亲，您真的要删除吗?"
              @confirm="deletelist(scope.row.id)"
            >
              <template #reference>
                <el-button>删除</el-button>
              </template>
            </el-popconfirm>
            <el-button @click="view(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="list3">
      <span class="span3">{{ page }}</span>
      <span class="span4">首页</span>
      <el-pagination
        background
        @current-change="changepage"
        v-model:current-page="currentpage"
        layout="prev, pager, next"
        :total="30"
      />

      <span class="span5">显示01-03条 共{{ page }}条</span>
    </div>
  </div>

  <Add v-show="isShowAdd" @hide="hideFn" @updatesuccess="successFn"></Add>
  <Getadd
    v-show="isShowEdits"
    @hide="hideFn2"
    :id="editid"
    @updatesuccess="successFn2"
  ></Getadd>

  <List
    v-show="isShowAddt"
    @hide="hideFn3"
    :id="editids"
    @updatesuccess="successFn3"
  ></List>
</template>

<script setup lang="ts">
import service from "../../utils/service";
import { useRouter } from "vue-router";
import { reactive, ref } from "vue";
import Add from "./rule/add.vue";
import Getadd from "./rule/getadd.vue";
import List from "./rule/lists.vue";
import { log } from "console";
const $router = useRouter();
const options = reactive<any[]>([]);
const goodlist = reactive<any[]>([]);
const obtn1 = () => {
  service({
    url: "/projects",
  }).then((res) => {
    options.push(...res.data);
  });
};
obtn1();
const obtn2 = () => {
  service({
    url: "/safetys",
  }).then((res) => {
    goodlist.push(...res.data);
  });
};
obtn2();
interface Irulelist {
  id: number;
  name: string;
  items: string;
  types: string;
  application: string;
  safety: string;
}
const datalist = reactive<Irulelist[]>([]);
const changlist = () => {
  service({
    url: "/rulelist",
  }).then((res) => {
    datalist.push(...res.data);
  });
};
changlist();
//删除
const deletelist = (id: any) => {
  service({
    url: `http://localhost:3000/rulelist/${id}`,
    method: "delete",
  }).then((res) => {
    location.reload();
  });
};
//搜索
const query = reactive<{
  name?: string;
  items?: string;
  safety?: string;
}>({
  name: "",
  items: "",
  safety: "",
});
const obtn = () => {
  service({
    url: "/rulelist",
    method: "get",
    params: {
      name: query.name,
      items: query.items,
      safety: query.safety,
    },
  }).then((res) => {
    datalist.length = 0;
    datalist.push(...res.data);
    console.log(res.data);
  });
};
const isShowAdd = ref(false); //控制修改组件的显示和隐藏
const Addlist = () => {
  isShowAdd.value = true;
};
const hideFn = () => {
  isShowAdd.value = false;
};
// 当修改成功后，需要重新发送请求，获取最新数据
const successFn = () => changlist();
//查看


const isShowAddt = ref(false); //控制修改组件的显示和隐藏
const editids = ref("");
const view = (id: string) => {
  editids.value = id;
  
  
  isShowAddt.value = true;
};
const hideFn3 = () => {
  isShowAddt.value = false;
};
// 当修改成功后，需要重新发送请求，获取最新数据
const successFn3 = () => changlist();

//修改
const isShowEdits = ref(false); //控制修改组件的显示和隐藏
const editid = ref("");
const change = (id: string) => {
  editid.value = id;
  isShowEdits.value = true;
};
const hideFn2 = () => {
  isShowEdits.value = false;
};
// 当修改成功后，需要重新发送请求，获取最新数据
const successFn2 = () => changlist();
//分页
const limit = ref(2);
const page = ref(1);
const currentpage = ref();

const changepage = (value: number) => {
  page.value = value;
  currentpage.value = value;
  service({
    url: "/rulelist",
    method: "get",
    params: {
      _page: currentpage.value,
      _limit: 2,
    },
  }).then((res) => {
    // tableData.length = 0,
    datalist.push(...res.data);
  });
};
</script>

<style scoped>
.top {
  display: flex;
}
.top p {
  color: #3bb19c;
}
.top span {
  font-weight: 700;
}

.el-divider {
  margin-top: -3px;
}
.da {
  margin-top: 16px;
}
.da span {
  font-weight: 700;
}
.da .add {
  float: right;
}
.bb {
  display: flex;
  margin-top: 10px;
}
.bb .top1 {
  display: flex;
}
.bb .top1 .el-input {
  width: 200px;
  height: 40px;
  margin-left: 10px;
}
.bb .top1 p {
  line-height: 40px;
}
.bb .fen {
  margin-left: 20px;
}
.bb .sou {
  margin-left: 20px;
}
.list3 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 15px;
}
.span3 {
  width: 40px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.988235294117647);
  background: #999999;
  border-radius: 5px;
  text-align: center;
}

.span4 {
  width: 60px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.988235294117647);
  background-color: rgba(153, 153, 153, 1);
  border-radius: 5px;
}

.span5 {
  width: 114px;
  height: 20px;
  font-size: 12px;
  color: rgb(102, 102, 102);
  margin-left: 10px;
}
</style>